import React, { useState } from 'react';
import { Form, Input, Modal, Radio , Select } from 'antd';

const { Option } = Select;
import { Link  ,history} from 'umi';
import { validatorPinyin } from '@/utils/utils';
const FormItem = Form.Item;

export interface CreateFormProps {

  modalVisible: boolean;
  onSubmit: (values: API.SysDeviceAttrItem,resetForm: any,selectedKeys?:string) => void;
  onCancel: () => void;
 
  attrList?:API.SysDeviceAttrItem[];
}

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const [form] = Form.useForm();

  const [formVals] = useState<API.SysDeviceAttrItem>({
    useState:1,
    
  });




  
  const formLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 15 },
  };
  


  const { modalVisible,attrList, onSubmit: handleAdd, onCancel} = props;
  const getAttr = (list: API.SysDeviceAttrItem[]) => {
    if (!list || list.length < 1) {
      return (
        <Option key={''} value={''} >
           <a onClick={toDeviceattr}> 没有可添加的私有变量，点击至系统管理》设备变量中添加</a>
        </Option>
      );
    }
    return list.map((item) => (
      <Option key={item.attrId} value={item.attrId}>
        {item.dispalyName}-{item.browseName}
      </Option>
    ))
  }


  const toDeviceattr = async () => {
    history.push("/authority/deviceattr");
    onCancel();
  };
  
  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    handleAdd(fieldsValue,resetForm);
  };

  const resetForm= async () => {
    form.resetFields();
  };
  return (
    <Modal
      width={800}
      destroyOnClose
      title="新增设备变量"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
       <Form
        {...formLayout}
        form={form}
        initialValues={{
          useState: formVals.useState,
        }}
      >
      
 
        <FormItem
          label="设备变量"
          name="attrId"
          rules={[{ required: true}]}
        >
          <Select placeholder="请选择">
            {getAttr(attrList)}
          </Select>
      
        </FormItem>
       
        <FormItem
          label="启用状态"
          name="useState"
        >
          <Radio.Group>
            <Radio value={1} >
              启用
            </Radio>
            <Radio value={0}>
              禁用
            </Radio>
          </Radio.Group>
        </FormItem>
      </Form>
    
      </Modal>
  );
};

export default CreateForm;
